import React, { useState, useMemo, useCallback } from 'react'

// React.memo 是用来缓存一个组件用的，只有组件内容的内容发生改变才会被重新渲染
// useCallback 是用来缓存一个函数用的
// useMemo 是用来缓存一个值，计算结果用的


const Child = React.memo((props) => {
    console.log('Child被执行了');
    return <h1>Child - {props.info.name} - {props.info.age} </h1>
})


export default function App() {

    const [count, setcount] = useState(100)

    const [name] = useState('张三')
    const [age] = useState(18)

    // 因为 count 发生改变后，会导致 App 组件重新加载，重新加载的时候
    // 就会重新创建一个 info ,我们的 info 和上次的 info 肯定是不同的
    // 将 info 给缓存掉
    // const info = {
    //     name, age
    // }

    const info = useMemo(() => {
        return {
            name, age
        }
    }, [name, age])


    return (
        <div>
            <h1>App - {count}</h1>
            <button onClick={() => {
                setcount(count + 1)
            }}>点击加 1</button>


            <hr />

            <Child info={info} />
        </div>
    )
}
